<template>
	<uni-transition mode-class="fade" :duration="0" :show="scrollShow" @change="change">
	  <view class="tocase">
		<view
		  class="scroll"
		>
		  <image class="avatar" :src="newList[index].avatar"></image>
		  <text class="name font-size-14">儿童{{ newList[index].name }}申请了帮扶</text>
		  <text class="name font-size-14">{{ newList[index].status }}</text>
		</view>
	  </view>
	</uni-transition>
</template>

<script>
// import scrollData from '@/components/scroll-data.vue'
export default {
  components: {
  },
  props: {
    scrollList: {
      type: Array,
      required: true,
    }
  },
  data() {
    return {
      index: 0,
      num: 0,
      scrollShow: true,
      flag:false,
      newList:[],
    };
  },
  created() {
    // this.scrollListold = this.scrollList
    
    // this.getScrcoll()
  },
  watch:{
    scrollList:{
      handler(val){
        // if(val.length == 0) return
        this.newList = val
        this.num = this.newList.length - 1;
        // for(let i=0,len=this.newList.length;this.newList<len;i++){

        // }
        // this.$forceUpdate()
        this.setTime()
      },
      immediate:true,
      deep:true
    }
  },
  computed:{
    // item() {
    //   return this.newList[this.index-1]
    // }
  },
  mounted() {
    setTimeout(()=>{
      this.scrollShow = true
    },500)
  },
  methods: {
	  change(){
		  console.log('change')
	  },
    setTime() {
      let timeSet = setInterval(() => {
        this.scrollShow = false
        this.changeIndex()
      }, 4000);
    },
    changeIndex(){
      this.index++
      // this.item = this.newList[this.index-1]
      if(this.index>this.num){
        this.index = 0
        // this.item = this.newList[this.index]
      }
      
      setTimeout(()=>{
        this.scrollShow = true
      },500)
    },
    getScrcoll() {
      
    },
    timeScroll() {

    },
  },
};
</script>

<style scoped>
.tocase {
    position: fixed;
    display: flex;
    align-items: center;
    top: 40rpx;
    left: 40rpx;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    color: #fff;
    text-align: center;
    padding: 8rpx 20rpx;
}
.tocase .scroll {
    display: flex;
    align-items: center;
}
.tocase .scroll .avatar{
	width: 30rpx;
	height: 30rpx;
	border-radius: 15rpx;
}
.tocase .scroll .name {
    margin-left: 12rpx;
}
</style>